<template>
  <el-container>
    <el-aside width="200px">
      <SidebarVue></SidebarVue>
    </el-aside>
    <el-container>
      <el-header>
        <HeaderVue></HeaderVue>
      </el-header>
      <el-main class="main">
        <!-- <router-view ></router-view> -->
       <router-view v-slot="{ Component }">
  <transition name="slide-fade" >
    <component :is="Component" />
  </transition>
</router-view>
        
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
  import SidebarVue from '../../components/Sidebar.vue';
  import HeaderVue from '../../components/Header.vue';
</script>

<style scoped>
.main{
  overflow: hidden;
}
/*
  Enter and leave animations can use different
  durations and timing functions.
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

/* .slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
} */

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-60px);
  opacity: 0;
}
</style>
